<template>
  <view class="page">
    <view class="search">
      <u-search
        height="26"
        :modelValue="timeValue"
        :disabled="true"
        @click="openFilter"
        placeholder="全部日期"
        :showAction="false"
      ></u-search>
    </view>
    <view class="list">
      <u-list
        v-if="orderList.length !== 0"
        :height="listHeight.height"
        @scrolltolower="getMore"
      >
        <view
          class="print"
          v-for="item in orderList"
          :key="item.id"
          @click="() => handleItem(item)"
        >
          <view class="right">
            <view class="lineOne">{{ item.billCode }}</view>
            <view class="info">
              <view class="value">
                出库日期：{{ $u.timeFormat(item.billOn, "yyyy-mm-dd") }}
              </view>
              <view class="value"> 出库类型：其他出库 </view>
            </view>
            <view class="info">
              <view class="value"> 仓库名称：{{ item.workhouseName }} </view>
              <view class="value"> 数量：{{ item.changeNum }} </view>
            </view>
          </view>
          <view class="state" :class="item.inputoutputType === 1 && 'out'">
            {{ item.inputoutputType === 1 ? "出库单" : "入库单" }}
          </view>
        </view>
      </u-list>
      <emptyList v-else></emptyList>
    </view>
  </view>
  <filteate
    ref="filteateRef"
    :hideText="true"
    :list="options"
    @submit="handelSubmit"
  ></filteate>
</template>

<script setup>
import { ref, computed } from "vue";
import emptyList from "@/components/empty/emptyList.vue";
import filteate from "@/components/initPopup/filteate.vue";
import { onLoad } from "@dcloudio/uni-app";
import { getCategoryInfo } from "@/api/order.js";
import { useListHeight } from "@/hooks/useListHeight.js";
import { useList } from "@/hooks/useList";
const { listHeight } = useListHeight({
  el: ".list",
});
const filteateRef = ref();
const openFilter = () => {
  filteateRef.value.clickHandle();
};
const options = [
  {
    name: "查询日期",
    type: "timeRange",
    value: "billOn",
    initValue: [],
  },
];

const handelSubmit = (data) => {
  let obj = {};
  for (let name in data) {
    if (name === "billOn") {
      const time = data[name];
      if (time && time.length !== 0) {
        obj.billOnStart = new Date(time[0]).getTime();
        obj.billOnEnd = new Date(time[time.length - 1]).getTime();
      }
    } else if (data[name] !== undefined) {
      obj[name] = data[name];
    }
  }
  searchParams.value = obj;
  resetList();
};
const searchParams = ref({});
const timeValue = computed(() => {
  if (searchParams.value.billOnStart) {
    return (
      uni.$u.timeFormat(searchParams.value.billOnStart, "yyyy-mm-dd") +
      "~" +
      uni.$u.timeFormat(searchParams.value.billOnEnd, "yyyy-mm-dd")
    );
  }
  return "";
});
const unitId = ref("");
const productSkuId = ref("");
onLoad((params) => {
  if (params.unitId) {
    productSkuId.value = params.productSkuId;
    unitId.value = params.unitId;
  }
});
const getList = async (item) => {
  return await getCategoryInfo({
    productSkuId: productSkuId.value,
    unitId: unitId.value,
    ...item,
    ...searchParams.value,
  });
};
const { orderList, getMore, resetList } = useList(getList);

const handleItem = (item) => {
  if (item.inputoutputType === 1) {
    // 出库单
    uni.navigateTo({
      url: "/pages/orderList/out/outListDetail?id=" + item.billCode,
    });
  } else {
    // 入库单
    uni.navigateTo({
      url: "/pages/orderList/in/inListDetail?id=" + item.billCode,
    });
  }
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.search {
  background-color: #fff;
  padding: 10px 16px;
}

.print {
  position: relative;
  margin: 10px 14px;
  padding: 9px 13px 4px;
  background: #ffffff;
  box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 10rpx;
  display: flex;
  align-items: center;

  .right {
    flex: 1;

    .lineOne {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4b4e50;
      line-height: 19px;
      margin-bottom: 13px;
    }

    .info {
      display: flex;
      justify-content: space-between;

      .value {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4b4e50;
        line-height: 17px;
        margin-bottom: 9px;
      }
    }
  }

  .state {
    position: absolute;
    top: 11px;
    right: 13px;
    width: 50px;
    height: 17px;
    line-height: 17px;
    color: #ff4c4c;
    background-color: #ffe3db;
    text-align: center;
    border-radius: 7px;
    font-size: 12px;

    &.out {
      background-color: #ffbc00;
      color: #fff;
    }
  }
}
</style>
